'use strict'
import React from "react";
import {render} from 'react-dom';
import {Link} from 'react-router';
//引入工具类
import MMALL_COM from 'util/comm.jsx';
import PRUDUCT from 'service/product_service.jsx';
import FileUploader from 'page/component/file-upload/index.jsx';
import RichEditor   from 'page/component/rich-editor/index.jsx';
//引入依赖页面
import PageTitle from 'page/component/page-title/index.jsx';

//引入样式文件
import './save.scss';

const _comm    = new MMALL_COM();
const _product = new PRUDUCT();
class ProductSave extends React.Component{
    constructor(props){
        super(props);
        this.state={
            id                 :this.props.params.id,
            name               : '',
            subtitle           : '',
            price              : 0,
            stock              : 0, 
            firstCategoryList  : [],
            firstCategoryId    : '',
            secondCategoryList : [],
            subImages          : [],
            detail             : '' 
        }
        //绑定this
        this.getCateOne     =    this.getCateOne.bind(this);
        this.getCateTwo     =    this.getCateTwo.bind(this);
    }
    componentDidMount(){
        this.getProduct();
        this.getCateOne();
    }
    //得到商品信息
    getProduct(){
        //如果有id字段
        if(this.state.id){
            let id=this.state.id;
            _product.getProduct(id).then(res=>{
                let product=this.productAdapter(res);

                this.setState(product);
                if(product.firstCategoryId){
                    this.getCateTwo();
                }
            },
            msg=>{
                _comm.errorTip('出错了，请稍后再试');
            })
        }
    }
    // 适配接口返回的数据
    productAdapter(product){
        // 如果父品类是0（根品类），则categoryId作为一级品类
        let firstCategoryId     = product.parentCategoryId === 0 ? product.categoryId : product.parentCategoryId,
            secondCategoryId    = product.parentCategoryId === 0 ? '' : product.categoryId;
        return {
            categoryId          : product.categoryId,
            name                : product.name,
            subtitle            : product.subtitle,
            subImages           : product.subImages.split(','),
            detail              : product.detail,
            price               : product.price,
            stock               : product.stock,
            firstCategoryId     : firstCategoryId,
            secondCategoryId    : secondCategoryId,
            status              : product.status,
            nameNotNull         : !!product.name,
            cateNotNull         : !product.firstCategoryId,
            subtitleNotNull     : !!product.subtitle,
        }
    }
    //获取一级分类
    getCateOne(){
        _product.getCategory().then(res=>{
            this.setState({firstCategoryList:res});
        },
        msg=>{
            _comm.errorTip(msg);
        })
    }
    //获取二级分类
    getCateTwo(){
        if(!this.state.firstCategoryId)
            return;

        _product.getCategory(this.state.firstCategoryId).then(res=>{
            this.setState({secondCategoryList:res})
        },
        msg=>{
             _comm.errorTip(msg);
        })
    }
    //加载商品列表
    render(){
        return (
            <div id="page-wrapper">
                <PageTitle pageTitle={'商品管理 -- 查看商品详情'}/>
                <div className="row">
                       <div className="form-wrap col-lg-12">
                            <div className="form-box form-horizontal">
                                <div className="form-label form-group">
                                    <label htmlFor='name' className='col-md-2 control-label'>商品名称</label>
                                    <div className="col-md-5">
                                        <input  type="text"  id="name" className='form-control' 
                                        name='name' value={this.state.name}  readOnly/>
                                    </div>
                                </div>
                                <div className="form-label form-group">
                                    <label htmlFor='subtitle' className='col-md-2 control-label'>商品描述</label>
                                    <div className="col-md-5">
                                        <input  type="text" id="subtitle" className='form-control'
                                        name="subtitle" value={this.state.subtitle} readOnly/>
                                    </div>
                                </div>
                                <div className="form-label form-group">
                                    <label htmlFor='status' className='col-md-2 control-label'>当前状态</label>
                                    <div className="col-md-5">
                                        <p type="text" className="form-control-static" id='status'>
                                            {
                                                this.state.status===1?'在售':'下架'
                                            }
                                        </p>
                                    </div>
                                </div>
                                <div className="form-label form-group">
                                    <label htmlFor='subtitle' className='col-md-2 control-label'>所属分类</label>
                                    <div className="col-md-5">
                                        <select className='form-control cate-select col-md-5' readOnly value={this.state.firstCategoryId}>
                                            <option value=''>
                                                选择所属一级分类
                                            </option>
                                            {
                                                this.state.firstCategoryList.map((category, index) => {
                                                    return (
                                                        <option value={category.id} key={index} >{category.name}</option>
                                                    );
                                                })
                                            }
                                        </select>
                                        {
                                            this.state.secondCategoryList.length?
                                            <select className='form-control cate-select col-md-5' readOnly value={this.state.secondCategoryId}>
                                                <option value=''>
                                                    选择所属二级分类
                                                </option>
                                                {
                                                    this.state.secondCategoryList.map((category, index) => {
                                                        return (
                                                            <option value={category.id} key={index}>{category.name}</option>
                                                        );
                                                    })
                                                }
                                            </select>:''
                                        }
                                    </div>
                                </div>
                                <div className="form-label form-group">
                                    <label htmlFor='price' className='col-md-2 control-label'>商品价格</label>
                                    <div className="col-md-3">
                                        <div className="input-group">
                                            <input type="number" id="price" className='form-control'
                                            name="price" value={this.state.price} readOnly />
                                            <div className="input-group-addon">元</div>
                                        </div>
                                    </div>
                                </div>
                                <div className="form-label form-group">
                                    <label htmlFor='stock' className='col-md-2 control-label'>商品库存</label>
                                    <div className="col-md-3">
                                        <div className="input-group">
                                            <input  type="number" id="stock" className='form-control' 
                                            name="stock" value={this.state.stock} readOnly />
                                            <div className="input-group-addon">件</div>
                                        </div>
                                    </div>
                                </div>
                                <div className="form-label form-group">
                                    <label htmlFor='img' className='col-md-2 control-label'>商品图片</label>
                                    <div className="img-con col-md-10">
                                        {
                                           this.state.subImages.map((image, index) => {
                                                return (
                                                    <div className="sub-img" key={index}>
                                                        <img className="img" src={_comm.getImageUrl(image)}/>
                                                    </div>
                                                );
                                            }) 
                                        }
                                    </div>
                                </div>
                                <div className="form-label form-group">
                                    <label htmlFor='img' className='col-md-2 control-label'>商品详情</label>
                                    <div className="col-md-10">
                                        <p className='text' dangerouslySetInnerHTML={{__html: this.state.detail}}>
                                        </p>
                                    </div>

                                </div>
                            </div>
                       </div>
                </div>
            </div>
        )
    }
}
export default ProductSave;
